import React, { useState } from 'react';
import IconFont from '../IconFont';
import styles from './index.less';
import moment from 'moment';
import { useWindowSize } from '@/utils/windowsize';
import { pxConversionMm, mmConversionPx } from "@/utils/transpxmm";


function AText({ config, setconfig, collapsed, layer }) {
    const { width, height } = useWindowSize();//设备宽高

    let getpagesize = () => {
        let active = config?.pages?.filter(it => it?.active)[0] ?? {}, percent = 1, pagewidth, pageheight, acw, ach;
        if (active.unit == "px") {
            acw = active.width;
            ach = active.height;
        } else {
            acw = mmConversionPx(active.width);
            ach = mmConversionPx(active.height);
        }

        if (acw && ach) {
            percent = ach / acw
        } else {
            percent = config?.height / config?.width
        }

        if (percent < 1) {
            pagewidth = width - (collapsed ? 80 : 240) - 460;
            pageheight = pagewidth * percent;
            //溢出补充
            if (pageheight > height - 100) {
                pageheight = height - 100;
                pagewidth = pageheight / percent;
            }
        } else {
            pageheight = height - 100;
            pagewidth = pageheight / percent;
        }

        return {
            percent: pageheight / ach,
            height: parseInt(pageheight),
            width: parseInt(pagewidth)
        }
    }



    const textcomp = (type, content, it) => {
        let percent = getpagesize().percent;

        return {
            type,
            id: moment().valueOf(),
            content,
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: 0,
                color: "#000000",
                backgroundColor: "#FFFFFF",
                width: it.unit == "mm" ? mmConversionPx(it.width) : it.width,
                height: 30 / percent,
                fontSize: parseInt(20 / percent)
            }
        }
    }


    const textcomps = (type, content, it) => {
        let percent = getpagesize().percent;

        return {
            type,
            id: moment().valueOf(),
            content,
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: 0,
                color: "#000000",
                backgroundColor: "#FFFFFF",
                width: 30 / percent,
                height: it.unit == "mm" ? mmConversionPx(it.height) : it.height,
                fontSize: parseInt(20 / percent)
            }
        }
    }

    return (
        <div className={styles.container}>
            <div className={`${styles.item} center`} onClick={() => {
                setconfig(s => {
                    let newcf = { ...s };
                    newcf.pages = newcf.pages.map(it => {
                        if (it.active) {
                            it.components = it.components ?? [];
                            it.components.push(textcomp("Rowtext", "文本组件", it))
                        }
                        return it
                    })
                    return newcf
                })
            }}>
                <div className="center" >
                    <IconFont type='icon-wenzigongju' style={{ color: "#1dac57" }}></IconFont>
                    <span>
                        横排文字
                    </span>
                </div>

                <div className={styles.row} style={{ width: 0, height: 120, overflow: "hidden", transition: "all 0.2s" }}>
                    <span>横排文字</span>
                </div>
            </div>

            <div className={`${styles.item} center`} onClick={() => {
                setconfig(s => {
                    let newcf = { ...s };
                    newcf.pages = newcf.pages.map(it => {
                        if (it.active) {
                            it.components = it.components ?? [];
                            it.components.push(textcomps("Columntext", "文本组件", it))
                        }
                        return it
                    })
                    return newcf
                })
            }}>
                <div className="center">
                    <IconFont type='icon-column' style={{ color: "#1dac57", fontSize: 16 }}></IconFont>
                    <span>
                        竖排文字
                    </span>
                </div>

                <div className={styles.column} style={{ width: 0, height: 120, overflow: "hidden", transition: "all 0.2s" }}>
                    <span>竖排文字</span>
                </div>
            </div>




        </div>
    );
}

export default AText;